<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery.overscroll</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
	#overscroll { width: 500px; height: 500px; overflow: hidden; border: solid 1px #000; margin: 30px auto; position: relative; }
	#overscroll ul { width: 2500px; margin:0; padding: 0; }
	#overscroll li { display: block; float: left; width: 100px; height: 100px; background-color: #FFF; }
	#overscroll li.alt { background-color: #C00; }
	#overscroll li.no-drag { background-color: #000; color: #FFF; }
	#overscroll li.last { clear: both; visibility: hidden; height: 0; padding: 0; }
</style>
</head>

<body>
	<h1>jQuery.overscroll</h1>
    
	<div id="overscroll">
	    <ul>
	        
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li><a id="link" href="javascript:void(0)">Click Me!</a></li><li class="no-drag">Can't drag me!</li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
		 	<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
			<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>		
			<li class="last"></li>
	    </ul>
	</div>
	
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="jquery.overscroll.js"></script>
    <script>
		$(function(o){	
			o = $("#overscroll").overscroll({
				cancelOn: '.no-drag',
                //hoverThumbs: true,
                //persistThumbs: true,
                //showThumbs: false,
                scrollLeft: 200,
                scrollTop: 100
			}).on('overscroll:dragstart overscroll:dragend overscroll:driftstart overscroll:driftend', function(event){
				console.log(event.type);
			});
			$("#link").click(function(){
			    if(!o.data("dragging")) {
			        console.log("clicked!");
			    } else {
			        return false;
			    }
			});
		});
    </script>
</body>
</html>
